<template>
  <div class="course-calendar-container">
    <FullCalendar ref="calendar" :options="calendarOptions" />

    <CourseEditor ref="courseEditor" />

    <el-dialog
      title="课程详情"
      width="400px"
      :visible.sync="displayDetailDialog"
    >
      <el-form v-if="eventInfo">
        <el-form-item label="课程名称">
          {{ eventInfo.title }}
        </el-form-item>
        <el-form-item label="课程类型">
          {{ eventInfo.extendedProps.courseType }}
        </el-form-item>
        <el-form-item label="老师">
          {{ eventInfo.extendedProps.teacher }}
        </el-form-item>
        <el-form-item label="学生">
          {{ eventInfo.extendedProps.studentList.join(', ') }}
        </el-form-item>
        <el-form-item label="上课时间">
          {{ format(eventInfo.start, 'yyyy-MM-dd HH:mm:ss') }} --
          {{ format(eventInfo.end, 'yyyy-MM-dd HH:mm:ss') }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="displayDetailDialog = false">取消</el-button>
        <el-button type="danger" @click="handleOpenDeleteDialog">
          删除
        </el-button>
        <el-button type="primary" @click="handleEdit">编辑</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="删除课程"
      width="400px"
      :visible.sync="displayDeleteDialog"
    >
      <div>
        <el-card v-if="eventInfo" shadow="never">
          <div slot="header">确定删除该次课程吗？</div>
          <p>{{ eventInfo.title }}</p>
          <p>{{ eventInfo.extendedProps.courseType }}</p>
        </el-card>
        <el-radio-group v-model="formData.delType">
          <el-radio :label="3">仅删除此次课程</el-radio>
          <el-radio :label="6">删除此后所有课程</el-radio>
        </el-radio-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="displayDeleteDialog = false">取消</el-button>
        <el-button type="primary" @click="handleDelete">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid'
  import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid'
  import interactionPlugin from '@fullcalendar/interaction'
  import zhLocale from '@fullcalendar/core/locales/zh-cn'
  import { format } from 'date-fns'
  import CourseEditor from '@/components/CourseEditor'

  export default {
    name: 'CourseCalendar',
    components: {
      FullCalendar,
      CourseEditor,
    },
    props: {
      classroomList: {
        type: Array,
        default: () => [],
      },
      courseList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      const self = this

      return {
        calendarOptions: {
          plugins: [
            dayGridPlugin,
            timeGridPlugin,
            resourceTimeGridPlugin,
            interactionPlugin,
          ],
          headerToolbar: {
            left: 'today',
            center: 'title',
            right: 'prev,next',
          },
          nowIndicator: true,
          initialView: 'timeGridWeek',
          slotDuration: '00:30',
          resources: [],
          slotMinTime: '08:00:00',
          slotMaxTime: '23:00:00',
          events: [],
          eventContent({ event }, h) {
            const { title } = event
            const { courseType, teacher } = event.extendedProps

            return h(
              'div',
              {
                id: `course-calendar-event-${event.id}`,
                class: 'course-wrapper',
                onClick: function () {
                  self.handleSelectEvent(event)
                },
              },
              [
                h(
                  'div',
                  {
                    class: 'course-summary',
                  },
                  [
                    h(
                      'div',
                      {
                        class: 'course-title',
                      },
                      [title, h('span', { class: 'course-type' }, courseType)]
                    ),
                    h('p', {}, `老师: ${teacher}`),
                  ]
                ),
              ]
            )
          },
          selectable: true,
          locale: zhLocale,
        },
        formData: {
          delType: 1,
        },
        displayDetailDialog: false,
        displayDeleteDialog: false,
        eventInfo: null,
      }
    },
    watch: {
      classroomList(val) {
        if (val && val.length > 0) {
          this.calendarOptions.resources = val.map((item) => {
            return {
              id: item.id,
              title: item.name,
            }
          })
        }
      },
      courseList(val) {
        if (val && val.length > 0) {
          this.calendarOptions.events = val.map((item) => {
            return {
              id: item.id,
              resourceId: item.classroomId,
              title: item.infoClass.className,
              start: item.startDate,
              end: item.endDate,
              extendedProps: {
                courseType: item.infoCourseType.className,
                teacher: item.teacher && item.teacher.name,
                studentList: item.students.map((d) => d.name),
              },
            }
          })
        }
      },
    },
    mounted() {
      const $calendarDom = this.$refs.calendar.$el
      const prevBrn = $calendarDom.querySelector('.fc-prev-button')
      const nextBtn = $calendarDom.querySelector('.fc-next-button')

      prevBrn.addEventListener('click', this.handleChangeDate)
      nextBtn.addEventListener('click', this.handleChangeDate)

      this.handleChangeDate()
    },
    methods: {
      format,
      handleChangeDate() {
        const { currentStart, currentEnd } = this.$refs.calendar.getApi().view
        this.$emit('change-date', {
          startDate: format(currentStart, 'yyyy-MM-dd 00:00:00'),
          endDate: format(currentEnd, 'yyyy-MM-dd 23:59:59'),
        })
      },
      handleSelectEvent(event) {
        this.eventInfo = event
        this.displayDetailDialog = true
      },
      handleEdit(event) {
        this.$refs['courseEditor'].showEdit(event)
      },
      handleOpenDeleteDialog() {
        this.displayDeleteDialog = true
      },
      handleDelete() {
        this.$message({
          type: 'success',
          message: '删除成功!',
        })

        this.eventInfo = null
        this.displayDetailDialog = false
        this.displayDeleteDialog = false

        this.handleChangeDate()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .course-calendar-container {
    position: relative;

    .fc-media-screen {
      ::v-deep {
        .course-wrapper {
          padding: 5px 10px;
          height: 100%;

          .course-header {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
          }
        }
      }
    }

    .el-dialog__wrapper {
      .el-form {
        padding: 0;

        .el-form-item {
          margin: 0;
        }
      }
    }
  }
</style>
